import React from 'react';

//通用的table list
class TableList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isFirstLoading: true
        }
    }
    componentWillReceiveProps() {
        //列表只有在第一次加载的时候，isFirstLoading是true
        this.setState({
            isFirstLoading: false
        })
    }
    render() {
        //表头信息
        let tableHeader = this.props.tableHeads.map(
            (tableHead, index) => {
                if(typeof tableHead === 'object') {
                    return <th key={index} width={tableHead.width}>{tableHead.name}</th>
                } else if(typeof tableHead === 'string') {
                    return <th key={index}>{tableHead}</th>
                } else {

                }
                
            }
        )
        //列表内容
        let listBody = this.props.children;
        //列表信息
        let listLoadingState = (
            <tr>
                <td colSpan={this.props.tableHeads.length} className='text-center'>
                    {this.state.isFirstLoading ? '数据加载中···' : '(′⌒`) 没找到相关信息'}</td>
            </tr>
        );
        let tableBody = listBody.length > 0 ? listBody : listLoadingState;
        return (
            <div className="row">
                <div className="col-md-12">
                    <table className="table table-striped table-bordered">
                        <thead>
                            <tr>
                                {tableHeader}
                            </tr>
                        </thead>
                        <tbody>
                            {tableBody}
                        </tbody>
                    </table>
                </div>
            </div>
        )
    }
}

export default TableList
//这样这个Pagination 
//在其它页面直接引入这个组件，传递相应参数即可使用

